<template>
  <div :class="bem()">
    <div :class="bem('top')" class="qt-center qt-padding-bottom--sm">
      <img src="@/assets/images/logo.png" class="qt-margin-top--sm" />
    </div>
    <div :class="bem('form')">
      <qt-form ref="form" :model="form.value" :rules="form.rules">
        <qt-input
          v-model="form.value.phone"
          field-name="phone"
          input-align="left"
          left-icon="phone"
          :label="$t('phoneNumber')"
          :maxlength="11"
        />
        <qt-input
          v-model="form.value.password"
          field-name="password"
          left-icon="lock"
          input-align="left"
          :label="$t('password')"
          :maxlength="30"
          :right-icon="eyeIcon"
          :type="passwordType"
          @click-right-icon="switchEye"
        />
      </qt-form>
      <qt-button class="qt-margin qt-margin-top--xl" @click="handleSubmit">登 录</qt-button>
    </div>
    <div :class="bem('bottom')" class="qt-center qt-margin-bottom">
      <img src="@/assets/images/icon_logo.png" />
      <span class="qt-text--sm qt-margin-left--xs qt-text--gray"> 上海科箭软件提供技术支持 </span>
    </div>
  </div>
</template>

<script>
import { QtButton, QtInput, QtForm } from '@/components/baseComp';
import { mapActions } from 'vuex';
import { checkRule, bem } from '@/utils';

export default {
  name: 'login',

  data() {
    return {
      passwordType: 'password',
      eyeIcon: 'closed-eye',
      form: {
        value: {
          phone: '',
          password: '',
        },
        rules: {
          phone: [
            {
              required: true,
              message: '请输入手机号',
            },
            {
              validator: checkRule.checkPhone,
            },
          ],
          password: {
            required: true,
            message: '请输入密码',
          },
        },
      },
    };
  },

  computed: {
    bem() {
      return bem.createBEM(this.$options.name);
    },
  },

  components: {
    QtButton,
    QtInput,
    QtForm,
  },

  methods: {
    ...mapActions('common', ['setData']),

    switchEye() {
      if (this.eyeIcon === 'closed-eye') {
        this.eyeIcon = 'eye-o';
        this.passwordType = 'text';
      } else {
        this.eyeIcon = 'closed-eye';
        this.passwordType = 'password';
      }
    },

    validate() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve(valid);
          }
        });
      });
    },

    handleSubmit() {
      const { phone, password } = this.form.value;

      this.validate().then(async () => {
        const res = await this.$http.fetchData(
          {
            url: '',
            params: {
              phoneNumber: phone,
              password,
            },
          },
          {
            text: '登录中...',
            show: true,
          },
        );

        this.setData({
          key: 'user',
          value: {
            token: res.data.token,
          },
          modules: 'common',
        });

        this.$router.replace({
          path: '/home',
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  &__top {
    padding-top: env(safe-area-inset-bottom);
    position: relative;
    background: #fff;
    &-close--suspend {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    img {
      padding: 20px 0;
      display: block;
      width: 250px;
    }
  }
  &__form {
    ::v-deep .van-cell {
      .van-field__left-icon {
        .van-icon {
          color: $default-color !important;
        }
      }
    }
  }
  &__bottom {
    position: fixed;
    bottom: 4px;
    left: 0;
    width: 100%;
    text-align: center;
    img {
      @include square(20px);
    }
  }
}
</style>
